<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>
    <div></div>
    <script>
        //    基本动画
        // 1、slideDown（）显示
        // 2、slideUp（）隐藏
        // 3、slideToggle（）切换
        //   =>本身如果是显示的，就隐藏
        // =>本身如果是隐藏的，就显示
        // 对于以上的三种运动函数，有共同的参数
        // =>第一个表示运动时间
        // =>第二个表示运动曲线
        // =>第三个表示运动结束的回调函数
        $('button:nth-child(1)').click(function () {
            // 执行 show 动画函数
            $('div').slideDown(1000, 'linear', function () {
                console.log('show结束了')
            })
        })
        $('button:nth-child(2)').click(function () {
            // 执行 hide 动画函数
            $('div').slideUp(1000, 'linear', function () {
                console.log('hide结束了')
            })
        })
        $('button:nth-child(3)').click(function () {
            // 执行 toggle 动画函数
            $('div').slideToggle(1000, 'linear', function () {
                console.log('toggle结束了')
            })
        })
    </script>
</body>

</html>